<div class="page page-misc clearfix">


    <ol class="breadcrumb breadcrumb-small">
        <li>UI Elements</li>
        <li class="active"><a href="#/ui/misc">Miscellaneous</a>
        </li>
    </ol>

    <div class="page-wrap">

        <div class="row">
            <div class="col-lg-6">
                <!-- Tooltips Demo -->
                <div ng-controller="TooltipDemoCtrl" class="mb30 panel panel-lined">
                    <div class="panel-heading"><i>Tooltips Demo</i>
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label>Dynamic Tooltip Text</label>
                            <input type="text" ng-model="dynamicTooltipText" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Dynamic Tooltip Popup Text</label>
                            <input type="text" ng-model="dynamicTooltip" class="form-control">
                        </div>
                        <p>
                            Pellentesque <a href="#" tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>, sit amet urna cursus eget nunc scelerisque viverra mauris, in aliquam. Tincidunt
                            <a href="j:;" tooltip-placement="left" tooltip="On the Left!">left</a> eget lorem. Vitae elementum curabitur
                            <a href="j:;" tooltip-placement="right" tooltip="On the Right!">right</a> nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
                            <a href="j:;" tooltip-placement="bottom" tooltip="On the Bottom!">bottom</a> pharetra convallis posuere morbi leo urna,
                            <a href="j:;" tooltip-animation="false" tooltip="I don't fade. :-(">fading</a> at elementum eu
                            <a href="j:;" tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
                        </p>

                        <p>
                            I can even contain HTML. <a href="#" tooltip-html-unsafe="{{htmlTooltip}}">Check me out!</a>
                        </p>

                        <form role="form">
                            <div class="form-group">
                                <label>Or use custom triggers, like focus: </label>
                                <input type="text" value="Click me!" tooltip="See? Now click away..." tooltip-trigger="focus" tooltip-placement="top" class="form-control" />
                            </div>
                        </form>
                    </div>
                </div>
                <!-- #end-tooltip -->

                <!-- Progress bars -->
                <div ng-controller="ProgressDemoCtrl" class="mb30 panel panel-lined">
                    <div class="panel-heading"><i>Progress Bars</i>
                    </div>
                    <div class="panel-body">
                        <progressbar value="55" class="progress-xxs" type="info"></progressbar>
                        <progressbar value="55" class="progress-xs" type="success"></progressbar>
                        <progressbar class="progress-striped active progress-sm" max="200" value="166" type="danger"></progressbar>
                        <hr/>
                        <progressbar class="progress-striped" value="22" type="warning">22%</progressbar>
                        <progressbar class="progress-striped active" value="dynamic" type="{{type}}">
                            {{type}} <i ng-show="showWarning">!!! Watch out !!!</i>
                        </progressbar>
                        <progress>
                            <bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}">
                                <span ng-hide="bar.value < 5">{{bar.value}}%</span>
                            </bar>
                        </progress>
                        <hr/>
                        <button class="btn btn-sm btn-default" type="button" ng-click="random()">Randomize</button>
                        <button class="btn btn-sm btn-default" type="button" ng-click="randomStacked()">Stacked</button>
                    </div>
                </div>
                <!-- #end-progress bars -->

            </div>
            <!-- #end col -->


            <div class="col-lg-6">
                <!-- Pagination -->
                <div ng-controller="PaginationDemoCtrl" class="mb30 panel panel-lined">
                    <div class="panel-heading"><i>Pagination</i>
                    </div>
                    <div class="panel-body">
                        <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm"></pagination>
                        <pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-xs" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
                        <pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm"></pagination>
                        <pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages" class="pagination-sm"></pagination>
                        <pre>The selected page no: {{currentPage}}</pre>
                        <button class="btn btn-info btn-sm" ng-click="setPage(3)">Set current page to: 3</button>

                        <hr/>
                        <h6>Pager</h6>
                        <pager total-items="totalItems" ng-model="currentPage"></pager>
                        <hr/>
                        <h6>Limit the maximum visible buttons</h6>
                        <pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
                        <pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
                        <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
                    </div>
                </div>
                <!-- #end-pagination -->

                <!-- Ratings -->
                <div ng-controller="RatingDemoCtrl" class="mb30 panel panel-lined">
                    <div class="panel-heading"><i>Rating</i>
                    </div>
                    <div class="panel-body">
                        <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" state-on="'fa fa-star'" state-off="'fa fa-star-o'"></rating>
                        <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>
                        <pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>
                    </div>
                </div>
                <!-- #end-ratings -->

            </div>
            <!-- #end col -->

        </div>
        <!-- #end row -->
    </div>
    <!-- #end page-wrap -->
</div>